<template>
    <div class="about">
        <v-header/>
        <v-sidebar :items="items"/>
        <div class="content-box" :class="{ 'content-collapse': collapse }">
            <v-tags></v-tags>
            <div class="content">
                <router-view v-slot="{ Component }">
                    <transition name="move" mode="out-in">
                        <keep-alive :include="tagsList">
                            <component :is="Component"/>
                        </keep-alive>
                    </transition>
                </router-view>
                <!-- <el-backtop target=".content"></el-backtop> -->

            </div>
        </div>
    </div>
</template>
<script>
    import vHeader from "../../components/Header";
    import vSidebar from "../../components/Sidebar";
    import vTags from "../../components/Tags.vue";


    export default {
        data() {
            return{
                items: [
                    {
                        icon: "el-icon-lx-cascades",
                        index: "operLogTable",
                        title: "日志",
                    },
                    {
                        icon: "el-icon-lx-cascades",
                        index: "power",
                        title: "权限管理",
                        subs: [
                            {
                                index: "user",
                                title: "用户管理"
                            },
                            {
                                index: "role",
                                title: "角色管理"
                            },
                            {
                                index: "permission",
                                title: "权限管理"
                            }
                        ]
                    },
                    {
                        icon: "el-icon-lx-attention",
                        index: "sysInfo",
                        title: "系统监控"
                    },{
                        // icon: "el-icon-collection-tag",
                        icon: "el-icon-lx-attention",
                        index: "backUp",
                        title: "数据备份"
                    },

                ]
            }
        },
        components: {
            vHeader,
            vSidebar,
            vTags
        },
        computed: {
            tagsList() {
                return this.$store.state.tagsList.map(item => item.name);
            },
            collapse() {
                return this.$store.state.collapse;
            }
        }
    };
</script>
